<template>
  <div>
    <!-- 准备容器 -->
    <div class="bar" ref="dom">
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {}
  },
  mounted() {
    //实例化
    let Mycharts = echarts.init(this.$refs.dom)
    Mycharts.setOption({

      xAxis: {
        show: false,
        //设置x轴的最大值和最小值
        min: 0,
        max: 100

      },
      yAxis: {
        show: false,
        //均匀分布  实现躺倒的效果
        type: 'category'
      },
      series: [
        {
          data: [78],
          type: 'bar',
          //柱状图的宽度
          barWidth: 10,
          //柱状图的颜色
          color: 'yellowgreen',
          //背景颜色设置
          showBackground: true,
          //背景颜色配置
          backgroundStyle: {
            color: "#eee"
          },
          //文本
          label: {
            show: true,
            //展示的文字从文字变成|
            formatter: "|",
            //让|显示在右边
            position: 'right'
          }
        }
      ],
      //布局
      grid: {
        left: -25,
        top: 0,
        bottom: 0,
        right: -10
      },
      //tooltip提示组件
      tooltip: {
        show: true,
        textStyle: {
          //提示框文字的颜色
          color: 'red'
        }
      },
    })

  }

}
</script>

<style scoped lang="scss">
.bar {
  width: 100%;
  height: 50px;
}
</style>